<template>
 <div v-click-outside>
     <input type="text" :value="formatDate">
     <div v-if="isVisible" class="penel">
         <div class="penel-nav">
             <span @click="prevYear">&lt;</span>
             <span @click="prevMonth">&lt;&lt;</span>
             <span>{{time.year}}年</span>
             <span>{{time.month+1}}月</span>
             <span @click="nextMonth">&gt;&gt;</span>
             <span @click="nextYear">&gt;</span>
         </div>
         <div class="penel-contain">
             <div class="days">
                 <span class="celldays" v-for="(item,index) in weekDays" :key="index">{{item}}</span>
                 </div>
             <div v-for="i in 6" :key="i">
                 <span  class="cell"  @click="chooseDate(visiableDays[(i-1)*7+(j-1)])"
                 :class="[
                 {notCurrentMonth:!isCurrentMonth(visiableDays[(i-1)*7+(j-1)])},
                 {today:isToday(visiableDays[(i-1)*7+(j-1)])},
                 {choosed:isChoosed(visiableDays[(i-1)*7+(j-1)])},
                 ]" 
                 v-for="j in 7" :key="j">{{visiableDays[(i-1)*7+(j-1)].getDate()}}</span>
             </div>
         </div>
         <div class="penel-footer">
             <span class="cell" @click="turnSpeday(-7)">上周</span>
             <span class="cell" @click="turnSpeday(-2)">前天</span>
             <span class="cell" @click="turnSpeday(-1)">昨天</span>
             <span class="cell" @click="turnSpeday()">今天</span>
             <span class="cell" @click="turnSpeday(1)">明天</span>
             <span class="cell" @click="turnSpeday(7)">下周</span>
             </div>
     </div>
 </div>
</template>

<script>
import * as util from "@/util.js"
 export default {
   data () {
       let {year,month,day} = util.getYearMonthDay(this.value);
     return {
         time:{year,month,day},
         weekDays:["日","一","二","三","四","五","六"],
         isVisible:false
     }
   },
   props:{
       value:{
           type:Date,
           default:()=>new Date
           }
   },
   created () {

   },
   methods:{
       //切换到具体的某一天
       turnSpeday(days=0){
           let d = new Date();
           let seconds = d.getTime()+days*3600*1000*24;
           d = new Date(seconds);
           this.time = util.getYearMonthDay(d);
           this.$emit("input",d);
       },
       //翻下一个月
       nextMonth(){
           //获取当前年月的一个日期
           let d = util.getDate(this.time.year,this.time.month,this.time.day);
           d.setMonth(d.getMonth()+1);
           this.time = util.getYearMonthDay(d);
           this.$emit("input",d);
       },
       //翻上一个月
       prevMonth(){
            let d = util.getDate(this.time.year,this.time.month,this.time.day);
            d.setMonth(d.getMonth()-1);
            this.time = util.getYearMonthDay(d);
            this.$emit("input",d);
       },
        //翻下一年
        nextYear(){
            let d = util.getDate(this.time.year,this.time.month,this.time.day);
            d.setFullYear(d.getFullYear()+1);
            this.time = util.getYearMonthDay(d);
            this.$emit("input",d);
        },
       //翻上一年
       prevYear(){
            let d = util.getDate(this.time.year,this.time.month,this.time.day);
            d.setFullYear(d.getFullYear()-1);
            this.time = util.getYearMonthDay(d);
            this.$emit("input",d);
       },
       isCurrentMonth(date){
           //判断是不是当月 ,用户输入的值 的年月是不是和参数的参数的年月相等
           let {year,month} =  util.getYearMonthDay(util.getDate(this.time.year,this.time.month,this.time.day));
           let {year:y,month:m} = util.getYearMonthDay(date);
           let falg = year===y && month===m
           return falg;
       },
       isToday(date){
           let {year ,month,day} = util.getYearMonthDay(new Date());//用户输入的年月
           let {year:y,month:m,day:d} = util.getYearMonthDay(date);
           return year ===y && month===m && day===d;
       },
       isChoosed(date){
           let {year ,month,day} = util.getYearMonthDay(this.value);//用户输入的年月
           let {year:y,month:m,day:d} = util.getYearMonthDay(date);
           return year ===y && month===m && day===d;
       },
       showPenel:function(){
           this.isVisible = true;
       },
       hidePenel:function(){
           this.isVisible = false;
       },
       chooseDate(date){
           this.time = util.getYearMonthDay(date);
           this.$emit("input",date);
           this.hidePenel();
       }
   },
   mounted(){
     
   },
   computed: {
       visiableDays(){
           //获取当前是周几
           let {year,month} =  util.getYearMonthDay(util.getDate(this.time.year,this.time.month,this.time.day));
           //先计算出 当前是2019.5.18 2019。5.1
           let currentFirstDay = util.getDate(year,month,1);//19.5.1 当前月份的第一天
           let week = currentFirstDay.getDay();//5.1号是周三
           //获取当前是周几，然后把天数往前推几天
           let startDay = currentFirstDay-week*3600*24*1000;
           let dayArr = [];
           for (let i = 0; i < 42; i++) {
               dayArr.push(new Date(startDay+ i*24*1000*3600))
               
           } 
           return dayArr
           //循环42天
       },
       formatDate(){
           let {year,month,day} = util.getYearMonthDay(this.value);
           month = month+1;
           return `${year}-${month}-${day}`
       }

   },
   components: {

   },
   directives: {
       clickOutside:{
            bind:function(el,bindings,vnode){
                const handler = (e)=>{
                    if(el.contains(e.target)){
                        //判断当前面板已经存在
                        if(!vnode.context.isVisible){
                            vnode.context.showPenel();
                        }
                    }else{
                        if(vnode.context.isVisible){
                            vnode.context.hidePenel();
                        }
                    }
                }
                document.addEventListener("click",handler)
            },
            unbind:function(el){
                document.removeEventListener("click",el.handler)
            }
       }
   }
 }
</script>

<style lang="less" scoped>
.notCurrentMonth{
    color:#ccc;
}
.choosed{//选中的项
    background: pink;
}
.today{
    background: red;
    border-radius: 50%;
    color:#fff;
}
.penel {
    width:34*7px;
    margin-top:2px;
    position:absolute;
    background: #fff;
    box-shadow: 1px 1px 1px greenyellow, -1px -1px 1px yellow;
    .penel-nav{
        height:30px;
        display: flex;
        justify-content: space-around;//内容环绕
        span{
            cursor: pointer;
            user-select: none;//不允许用户设置或检索是否允许用户选中文本
        }
    }
    .penel-contain{
        border:1px solid #ccc;
        .celldays{
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width:32px;
            height:32px;
            font-weight: bold;
        }
        .cell{
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width:32px;
            height:32px;
            font-weight: bold;
            box-sizing: border-box;
            &:hover{
                border: 1px solid pink;
                cursor: pointer;
            }
        }
        
    }
    .penel-footer{
        height: 30px;
        display: flex;
        justify-content: space-around;
        .cell{
            width:50px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            justify-content: space-around;
            align-items: center;
            &:hover{
                background:blanchedalmond;
                cursor: pointer;
            }
           
        }
    }
 
}
 
</style>
